<template>
    <div>
        <header>
          <h1 class="backImg">
            刘俊军个人博客
          </h1>
        </header>
        <div class="clearfix el-tabs__header el-tabs__nav-wrap header-nav">
          <!-- 顶部导航 -->
          <router-link class="el-tabs__item" :class=" v.Name == activeNameNav ? 'is-active' : ''" :to="'/type/' + v.Name" v-for="(v , i) in nav_list" :name="v.Name" :key="i">{{v.Name}}</router-link>
        </div>
        <div id="l_minCont">
          <!-- 内容区域 -->
            <div class="minfl">
                <el-main style="padding-top: 0">
                  <router-view></router-view>
                </el-main>
            </div>
            <!-- 右侧区域 -->
            <div class="submitformBox minfr">
              <el-row style="margin-bottom: 20px;">
                <!-- 搜索 -->
                <el-input style="width: 74%" v-model="searchTest" @keyup.enter.native="searchSubmit()" placeholder="请输入搜索内容"></el-input>
                <el-button icon="el-icon-search" type="primary" @click="searchSubmit"></el-button>
              </el-row>
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <!-- 登录 -->
                <el-tab-pane label="登录" name="first">
                  <el-form v-if="loginShow" v-loading="submitLoading" element-loading-text="登录验证中..." :model="dynamicValidateForm" :rules='rules' ref="dynamicValidateForm" label-width="52px" class="demo-dynamic">
                    <el-form-item prop="user" label="账号">
                      <el-input v-model="dynamicValidateForm.user" @keyup.enter.native="submitForm('dynamicValidateForm','api/user/reguser','submitLoading')"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                      <el-input type="password" v-model="dynamicValidateForm.password"  @keyup.enter.native="submitForm('dynamicValidateForm','api/user/reguser','submitLoading')"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('dynamicValidateForm','api/user/reguser','submitLoading')">登录</el-button>
                      <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                    </el-form-item>
                  </el-form>
                  <div v-else>
                    <el-row>
                      <el-col style="margin-bottom: 10px" :span="24">您好，<span v-if="user.admin">管理员</span>{{user.user}}</el-col>
                    </el-row>
                    <el-row v-if="user.admin">
                      <el-col style="margin-bottom: 10px" :span="24">
                        <router-link to="/admin/index">博客管理</router-link>
                      </el-col>
                    </el-row>
                    <el-row v-else>
                      <el-col style="margin-bottom: 10px" :span="24">欢迎登录我的博客~~</el-col>
                    </el-row>
                    <el-row>
                      <el-col style="margin-bottom: 30px" :span="24"><el-button style="width:100%" type="primary" @click="endUser">退出</el-button></el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="注册" name="second">
                  <el-form v-loading="submitLoading2" element-loading-text="注册验证提交中" :model="dynamicValidateForm2" :rules='rules2' ref="dynamicValidateForm2" label-width="80px" class="demo-dynamic">
                    <el-form-item prop="user" label="账号">
                      <el-input @keyup.enter.native="submitForm('dynamicValidateForm2','api/user/adduser','submitLoading2')" v-model="dynamicValidateForm2.user"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                      <el-input type="password" @keyup.enter.native="submitForm('dynamicValidateForm2','api/user/adduser','submitLoading2')" v-model="dynamicValidateForm2.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="password2" label="确认密码">
                      <el-input type="password" @keyup.enter.native="submitForm('dynamicValidateForm2','api/user/adduser','submitLoading2')" v-model="dynamicValidateForm2.password2"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('dynamicValidateForm2','api/user/adduser','submitLoading2')">注册</el-button>
                      <el-button @click="resetForm('dynamicValidateForm2')">重置</el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>

              </el-tabs>

            </div>
        </div>
        <!-- 底部 -->
        <footer style="background-image: url(http://www.liujunjun.top/images/header_bg.jpg)">
            <div>
            本站内容大多来自网络,若侵犯了您的权益，请E-mail:
            <span>
                695387036@qq.com
            </span>
            ，我会在48小时内删除相关资源
            <a href="http://www.miitbeian.gov.cn/" target="_blank">湘ICP备17005042号</a>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
  data() {
    return {
      files_url: this.files_url,
      activeName: "first",
      activeNameNav: this.$router.history.current.params.type ? this.$router.history.current.params.type : 'home',
      submitLoading: false,
      submitLoading2: false,
      submitLoading3: false,
      nav_list: [],
      user: {},
      loginShow: true,
      searchTest: "",
      dynamicValidateForm: {
        password: "",
        user: ""
      },
      dynamicValidateForm2: {
        user: "",
        password: "",
        password2: ""
      },
      rules: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ]
      },
      rules2: {
        user: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
          // { pattern: this.dynamicValidateForm2.password == this.dynamicValidateForm2.password2, message: '用户名只能为中文'}
        ],
        password2: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请再次输入密码"));
              } else if (value !== this.dynamicValidateForm2.password) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    // console.log(this.$store.state.files_url);
    // this.submitPost();
    // this.is_login("api/is_login");
    this.getCategory("api/getCategory");
  },
  computed: {
    task() {
      return this.$store.state.userInfo;
    }
  },
  watch: {
    task: {
      deep: true,
      handler(val) {
        // 由于是异步载入，所以只能在状态值的变化时执行渲染操作
        // 绝不可在mounted中执行render方法
        //  this.render(val)
        // console.log(val);
        this.user = val;
        this.loginShow = val.user ? false : true;
      }
    },
    "$route": "fetchDate"
  },
  methods: {
    fetchDate (e) {
      this.activeNameNav = e.params.type ? e.params.type : 'home'
    },
    // is_login: async function(url) {
    //   let _this = this;
    //   let response = await _this.http.get(url);
    //   if (response.data.data) {
    //     _this.saverFn.local.set("user", response.data.data);
    //     _this.user = response.data.data;
    //     _this.loginShow = false;
    //   }
    // },
    searchSubmit() {
      console.log(this.$router);
      this.$router.push({
        path: this.$router.fullPath + "?search=" + this.searchTest
      });
    },
    end_login: async function(url) {
      let _this = this;
      await _this.http.get(url, null, _this);
      _this.user = {};
    },
    endUser() {
      this.loginShow = true;
      this.end_login("api/end_login");
    },
    handleClick(tab) {
      console.log(tab);
    },
    submitForm(formName, url, loading) {
      let _this = this;
      // console.log(_this[formName]);
      _this.saverFn.formSubmit(_this, formName, function() {
        _this.submitPost(url, _this[formName], loading);
        _this[loading] = true;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getCategory: async function(url, data) {
      let _this = this;
      let response = await _this.http.get(url, data, _this);
      _this.saverFn.httpSuccess(
        _this,
        response,
        function() {
          _this.nav_list = [{ Name: "home", id: "0" }];
        },
        function() {
          _this.nav_list = response.data.data;
          _this.nav_list.unshift({ Name: "home", id: "0" });
        },
        true
      );
    },

    submitPost: async function(url, data, loading) {
      let _this = this;
      // console.log(data);
      let response = await _this.http.post(url, data);
      _this[loading] = false;
      _this.saverFn.httpSuccess(_this, response, null, function() {
        if (response.data.session.user) {
          _this.user = response.data.session.user;
          _this.loginShow = false;
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = true;
    next();
  }
};
</script>
<style lang="less">
@import "../public/pubilcColor.less";
.el-tabs__nav {
  margin: 0 20px;
}
.backImg {
  background: url(http://www.liujunjun.top/images/header_bg_01.jpg) no-repeat 50% 50%;
  height: 150px;
  text-align: center;
  position: relative;
  font-size: 100px;
  text-indent: -9999px;

  &::before {
    content: "";
    background: url(http://www.liujunjun.top/images/my.jpg) no-repeat center / 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
  }
}
.backImg img {
  width: 80px;
  vertical-align: middle;
  border-radius: 50%;
}
footer {
  background: url() no-repeat 50% 50%;
  height: 100px;
  div,
  a {
    line-height: 100px;
    text-align: center;
    font-size: 14px;
    color: white;
  }
  span {
    color: @red;
    font-weight: 900;
  }
  a {
    margin-left: 10px;
  }
}
#l_minCont {
  margin: 30px 3%;
  position: relative;
  min-height: 500px;
  .submitformBox {
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px 20px 0;
    background: @bgcolor;
    border-radius: 3px;
    width: 276px;
  }
  .minfl {
    margin-right: 276px;
  }
}
.header-nav {}
</style>
